<div class="panel panel-default">
	<div class="panel-heading"><strong>Registro de Personas</strong></div>
	<div class="panel-body">
		<div class="row">
			<div class="col-md-3">
			<form class="form-inline" role="form" id="form_insertar">
			    <div id="respuesta"></div><br />
				<div class="form-group">
					<label class="control-label" class="control-label" for="cedula">Cédula: </label><br />
					<input type="text" name="cedula" class="form-control" id="cedula" value="" required />
					<div id="respuestacedula"></div>
				</div><br /><br />
				<div class="form-group">
					<label class="control-label" for="nombres">Nombres: </label><br />
					<input type="text" name="nombres" class="form-control" id="nombres" value="" required />
					<div id="respuestanombres"></div>
				</div><br /><br />
				<div class="form-group">
					<label class="control-label" for="apellidos">Apellidos: </label><br />
					<input type="text" name="apellidos" class="form-control" id="apellidos" value="" required />
					<div id="respuestaapellidos"></div>
				</div><br /><br />
				<div class="form-group">
					<label class="control-label" for="direccion">Dirección: </label><br />
					<input type="text" name="direccion" class="form-control" id="direccion" value="" />
					<div id="respuestadireccion"></div>
				</div><br /><br />
				<div class="form-group">
					<label class="control-label" for="telefono">Teléfono: </label><br />
					<input type="text" name="telefono" class="form-control" id="telefono" value="" />
					<div id="respuestatelefono"></div><br />
				</div><br />
				<div class="form-group">
					<label class="control-label" for="tipo">Tipo: </label><br />
					<select name="tipo" id="tipo" class="form-control">
						<option value="0">Seleccione tipo</option>
						<option value="1">Usuario</option>
						<option value="2">Testigo</option>
					</select>
					<div id="respuestatipo"></div>
				</div><br />
				<div id="perfil"></div>
				<br />
				<label class="control-label">
					<input type="submit" name="insertar" value="Registrar" id="insertar" class="btn btn-primary" />
				</label>
			</form>
			</div>
			<div class="col-md-9">
				<div class="panel panel-default">
					<div class="panel-heading"><strong>Personas Registradas</strong></div>
					<div class="panel-body">
						<div id="personas">
							<table border="0"  id="informe" class="table table-condensed">
								<thead>
									<tr>
									<?php
										foreach($per['indices'] as $key=>$val){ ?>
										<th><?php echo $val;?></th>
										<?php }
										unset($per['indices']) ?>
									</tr>
								</thead>
								<tbody>
								<?php
									
									foreach($per as $j=>$row){
										
										?><tr><?php
										foreach($row as $k=>$v){
									?>
										<td><?php echo $v;?></td>
										<?php } ?>
									</tr>
									<?php
									}
									
								?>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<br />

<script>
$(document).ready( function () {
	$("#cedula").focus();
		$('#informe').dataTable( {
			"sDom": 'T<"clear">lfrtip',
			"oTableTools": {
				"sSwfPath": "<?php echo base_url();?>media/js/copy_csv_xls_pdf.swf"
			}
		} );
	} );
	
	$("#form_insertar").validate({
		rules: {
			cedula: {required:true,digits: true},
			nombres: {required:true},
			apellidos: {required:true},
			telefono: {digits: true},
			contrasena: {required:true},
			rcontrasena: {required:true,equalTo: "#contrasena"}
		},
		messages:{
			cedula: {   required: 'Ingrese Número de Cédula',
						digits: 'Solo se permiten Números'
					},
			nombres: {required: "Ingrese el Nombre"},
			apellidos: {required: "Ingrese el/los Apellido(s)"},
			telefono: {digits: 'Solo se permiten Números'},
			contrasena: {required: "Ingrese una Contraseña"},
			rcontrasena: {required: "Ingrese una Contraseña",
						  equalTo: "Las Contraseñas no Coinciden"
						}
		}
		});
	
	
	$("#tipo").change(function(event){
		var tipo = $("#tipo").val();
		$("#respuestatipo").html('');
		if(tipo==1){
			$.post("<?php echo $url2;?>",{tipo:tipo},function(res){
					$("#perfil").html(res);
				});
			}else

		if(tipo==2){
			$.post("<?php echo $url2;?>",{tipo:tipo},function(res){
				$("#perfil").html('');
			});
		}
	});


	$("#insertar").click(function(event)
			{
		event.preventDefault();
		var form = $( "#form_insertar" );
		form.valid();
		var contrasena=$("#contrasena").val();
		var rcontrasena=$("#rcontrasena").val();
		var perfiles=$("#perfiles").val();
		var tipo=$("#tipo").val();
		var cedula=$("#cedula").val();
		var nombres=$("#nombres").val();
		var apellidos=$("#apellidos").val();
		var direccion=$("#direccion").val();
		var telefono=$("#telefono").val();

		if(tipo==2)
		{
 		   contrasena=1;
 		   rcontrasena=1;
		}

		
		if(tipo!=0)
		{
			if(contrasena==rcontrasena)
			{
		if(cedula !="")
				{
				if(nombres !="") {
						if(apellidos !="") {
							if(telefono !="") {
								$.post("<?php echo $url1;?>",{perfiles:perfiles,cedula:cedula,nombres:nombres,apellidos:apellidos,direccion:direccion,telefono:telefono,contrasena:contrasena},function(res){
									if(res==1){
										$("input[type=text]").val("");
										$("input[type=password]").val("");
										$("#respuestacedula").html('');
										$("#respuestanombres").html('');
										$("#respuestaapellidos").html('');
										$("#respuestatelefono").html('');
										$("#cedula").focus();
										$("#respuesta").html('<span style="color:green;">Persona Registrada con Exito</span>');
										sleep(500);
										location.reload(); 
									}else{
										$("#respuesta").html('<span class="warning">Cédula ya Registrada</span>');
									}
								});
							}else{
								$("#respuestatelefono").html('<span class="error">Ingrese el telefono.</span>');
							}
						}else{
							$("#respuestaapellidos").html('<span class="error">Ingrese los apellidos.</span>');
						}
			   }else{
				$("#respuestanombres").html('<span class="error">Ingrese el nombre.</span>');
				}
				}else{
					$("#respuestacedula").html('<span class="error">Ingrese la cedula.</span>');
				}
			}else{
				$("#respuestacontrasena").html('');
			}
		}else{
			$("#respuestatipo").html('<span class="error">Ingrese el tipo.</span>');
		}
			
		
	});

		function sleep(milliseconds) {
	  var start = new Date().getTime();
	  for (var i = 0; i < 1e7; i++) {
		if ((new Date().getTime() - start) > milliseconds){
		  break;
		}
	  }
	}

</script>